<div ng-controller="StencilController" ng-cloak="">

  <div class="subheader editor-toolbar" id="editor-header">
    <a ng-click="backToLanding()" title="{{'GENERAL.MAIN-TITLE' | translate}}">
      <img class="toolbar-logo" ng-src="{{appResourceRoot}}images/flowable-logo.png"
           ng-srcset="{{appResourceRoot}}images/flowable-logo.png 1x, {{appResourceRoot}}images/flowable-logo@2x.png 2x">
    </a>
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-controller="ToolbarController" ng-cloak>
        <button id="{{item.id}}"
                title="{{item.title | translate}}"
                ng-repeat="item in items"
                ng-switch on="item.type"
                class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
                ng-disabled="item.type == 'separator' || item.enabled == false"
                ng-click="toolbarButtonClicked($index)">
          <i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"
             title="{{item.title | translate}}"></i>
          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="ToolbarController">
        <button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type"
                class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
                ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)"
                id="{{item.id}}">
          <i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"
             title="{{item.title | translate}}"></i>
          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
  </div>
  <div class="full">
    <div class="row row-no-gutter">
      <div id="paletteHelpWrapper" class="col-xs-3" ng-class="{'paletteCollapsed': paletteCollapsed}">

        <div class="nav-title" id="paletteHeader">
          <div class="nav-header-top">
            <i class="glyphicon clickable" ng-click="paletteCollapsed=!paletteCollapsed"
               ng-class="{'glyphicon-chevron-right': paletteCollapsed,'pull-right glyphicon-chevron-left': !paletteCollapsed}"></i>
            流程组件选取
          </div>
        </div>

        <div class="stencils" id="paletteSection" ng-show="!paletteCollapsed">

          <div ng-if="stencilItemGroups.length > 1">
            <div ng-repeat="group in stencilItemGroups">

              <ul ng-if="group.visible && group.items" class="stencil-group"
                  ng-class="{collapsed: !group.expanded, 'first': $first}">
                <li ng-include="'views/partials/stencil-item-template.html'"></li>
              </ul>

              <div ng-if="!group.items" ng-include="'views/partials/root-stencil-item-template.html'"></div>

            </div>
          </div>
          <div ng-if="stencilItemGroups.length == 1">
            <ul class="stencil-group">
              <li ng-repeat="item in stencilItemGroups[0].paletteItems" class="stencil-item"
                  id="{{item.id}}"
                  title="{{item.description | translate}}"
                  ng-model="draggedElement"
                  data-drag="true"
                  jqyoui-draggable="{onStart:'startDragCallback', onDrag:'dragCallback'}"
                  data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}">
                <img ng-if="!item.customIcon" ng-src="stencilsets/bpmn2.0/icons/{{item.icon}}" width="16px;"
                     height="16px;"/>
                <img ng-if="item.customIcon" ng-src="{{config.contextRoot}}/app/rest/image/{{item.icon}}" width="16px;"
                     height="16px;"/>
                {{item.name | translate}}
              </li>
            </ul>
          </div>
        </div>
        <div id="process-treeview-wrapper" ng-controller="ProcessNavigatorController" ng-show="!paletteCollapsed">
          <div class="process-treeview-header">
            流程导航
          </div>
          <div class="process-treeview-body" ng-show="isEditorReady">
            <div class="process-treeview-process-title" title="{{treeview.id}}"
                 ng-class="{'current-process': treeview.current}">
              流程: {{treeview.name}}
              <img ng-show="!treeview.current" ng-src="images/pencil.png" class="pull-right"
                   ng-click="edit(treeview.id)"/>
            </div>
            <ul class="process-treeview-list" ng-if="treeview.children">
              <li ng-repeat="child in treeview.children" ng-include="'views/partials/process-tree-list.html'">
              </li>
            </ul>
            <div ng-if="!treeview.children || treeview.children.length == 0" style="padding-left: 5px;">
              没有使用子流程元素
            </div>
          </div>
        </div>
      </div>
      <div id="propertiesHelpWrapper" class="col-xs-3" ng-class="{'propertiesCollapsed': propertiesCollapsed}">
        <div class="propertySection" id="propertySection">
          <div class="clearfix" id="propertyHeader">
            <div class="pull-right" ng-if="selectedItem.auditData.createDate">
              <strong>{{'ELEMENT.DATE_CREATED' | translate}}: </strong>
              {{selectedItem.auditData.createDate}}
            </div>
            <div class="pull-right" ng-if="selectedItem.auditData.author">
              <strong>{{'ELEMENT.AUTHOR' | translate}}: </strong>
              {{selectedItem.auditData.author}}
            </div>
            <div class="nav-title">
              <div class="nav-header-top">
                <i class="glyphicon clickable" ng-click="propertiesCollapsed=!propertiesCollapsed"
                   ng-class="{'glyphicon-chevron-left': propertiesCollapsed, 'glyphicon-chevron-right': !propertiesCollapsed}"></i>
                <span
                  ng-show="selectedItem.title != undefined && selectedItem.title != null && selectedItem.title.length > 0">{{selectedItem.title}}</span>
                <span
                  ng-show="!selectedItem || selectedItem.title == undefined || selectedItem.title == null || selectedItem.title.length == 0">{{modelData.name}}</span>
              </div>
            </div>
          </div>
          <div class="selected-item-body" ng-show="!propertiesCollapsed">
            <div>
              <div class="property-row" ng-repeat="property in selectedItem.properties"
                   ng-click="propertyClicked($index)" ng-class="{'clear' : $index%2 == 0}">

                <span class="title" ng-if="!property.hidden">{{ property.title }}&nbsp;:</span>
                <span class="title-removed" ng-if="property.hidden"><i>{{ property.title }}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i></span>
                <span class="value" ng-if="!property.hidden">
                     <ng-include
                       src="getPropertyTemplateUrl($index)"
                       ng-if="!property.hasReadWriteMode"></ng-include>
                     <ng-include src="getPropertyReadModeTemplateUrl($index)"
                                 ng-if="property.hasReadWriteMode && property.mode == 'read'"></ng-include>
                     <ng-include src="getPropertyWriteModeTemplateUrl($index)"
                                 ng-if="property.hasReadWriteMode && property.mode == 'write'"></ng-include>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="contentCanvasWrapper"
           ng-class="{'leftCollapsedCanvasWrapper': paletteCollapsed,'rightCollapsedCanvasWrapper': propertiesCollapsed}">
        <div id="canvasHelpWrapper" class="col-xs-12">
          <div class="canvas-wrapper" id="canvasSection"
               ng-model="droppedElement"
               ng-model="droppedElement"
               data-drop="true"
               data-jqyoui-options
               jqyoui-droppable="{onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
            <div class="canvas-message" id="model-modified-date"></div>
            <div class="Oryx_button"
                 id="delete-button"
                 title="{{'BUTTON.ACTION.DELETE.TOOLTIP' | translate}}"
                 ng-click="deleteShape()"
                 style="display:none">
              <img src="images/delete.png"/>
            </div>
            <div class="Oryx_button"
                 id="morph-button"
                 title="{{'BUTTON.ACTION.MORPH.TOOLTIP' | translate}}"
                 ng-click="morphShape()"
                 style="display:none">
              <img src="images/wrench.png"/>
            </div>
            <div class="Oryx_button" id="edit-button" style="display:none" ng-click="editShape()">
              <img src="images/pencil.png"/>
            </div>
            <div class="Oryx_button"
                 ng-repeat="item in quickMenuItems"
                 id="{{item.id}}"
                 title="{{item.description}}"
                 ng-click="quickAddItem(item.id)"
                 ng-model="draggedElement"
                 data-drag="true"
                 jqyoui-draggable="{onStart:'startDragCallbackQuickMenu', onDrag:'dragCallbackQuickMenu'}"
                 data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}"
                 style="display:none">
              <img ng-src="stencilsets/bpmn2.0/icons/{{item.icon}}"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
